<template>
  <div class="homechannel-page">
    <!-- 顶部图标 -->
    <div class="btn-wrapper">
      <van-icon  @click="leftShow = true" class="search" name="search" size="25"/>
        <van-icon @click="rightShow = true" class="ellipsis" name="ellipsis" size="25">
      </van-icon>
    </div>
  <!-- 频道切换弹出 -->
    <van-popup
      v-model="rightShow"
      position="left"
      closeable
      :style="{ height: '100%', width: '100%' }">
        <div class="article-channel">
          <div class="head">
            <h3>我的频道<small>点击进入频道</small></h3>
            <a class="edit" href="javascript:;">编辑</a>
          </div>
          <div class="body">
            <a href="javascript:;"
               :class="{active:activeName===item.id}"
               v-for="item in userList"
               :key="item.id"
               @click="cChannel(item.id)"
            >
               {{item.name}}
            </a>
          </div>
          <div class="head" style="margin-top:12px">
            <h3>频道推荐</h3>
          </div>
          <div class="body">
            <a href="javascript:;" v-for="item in channelList" :key="item.id">{{item.name}}</a>
          </div>
        </div>
    </van-popup>
    <!-- 搜索弹出 -->
      <van-popup
        v-model="leftShow"
        position="bottom"
        :style="{ height: '100%', width: '100%' }">
        <van-search
          v-model="searchValue"
          show-action
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #left>
            <div class="left-margin" @click="leftShow=false">
               <van-icon name="arrow-left" />
            </div>
          </template>
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </van-popup>
    </div>

</template>

<script>
import { getChannels, UserChannel } from '@/api/user'
export default {
  name: 'HomeChannel',
  props: {
    activeName: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      rightShow: false,
      leftShow: false,
      searchValue: '',
      // channelList: {},
      AllChannelList: [],
      userList: {}
    }
  },
  async created () {
    const res = await UserChannel()
    // console.log(res)
    this.userList = res.data.channels
    this.getChannels()
  },
  methods: {
    onSearch () {
    },
    async getChannels () {
      const res = await getChannels()
      // console.log(res)
      this.AllChannelList = res.data.channels
      console.log(this.AllChannelList)
    },
    cChannel (activeName) {
      this.rightShow = false
      this.$emit('update:activeName', activeName)
    }
  },
  computed: {
    channelList () {
      return this.AllChannelList.filter(item => !this.userList.find(i => i.id === item.id))
    }
  }
}
</script>

<style  lang="less" scoped>
.homechannel-page{
   z-index: 100;
  .btn-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 86px;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content:space-evenly;

    &::before {
      padding: 0 10px;
      content: "";
      width: 20px;
      height: 44px;
      position: absolute;
      left: -20px;
      top: 0;
      background: linear-gradient(to right, rgba(255,255,255,0), #fff);
    }
  }
  .van-popup {
    width: 100%;
    height: 100%;
    ::v-deep .van-popup__close-icon {
      font-size: 20px;
      right: 12px;
      top: 12px;
    }
  }
  .article-channel {
    margin-top: 44px;
    .head {
      padding: 0 16px;
      display: flex;
      justify-content: space-between;
      justify-items: center;
      padding-bottom: 12px;
      h3 {
        font-size: 16px;
        color: #333;
        margin: 0;
        small {
          font-size: 12px;
          color: #999;
          margin-left: 10px;
        }
      }
      .edit {
        float: right;
        height: 22px;
        width: 52px;
        line-height: 22px;
        text-align: center;
        color: #DE644B;
        border-radius: 11px;
        border: 1px solid #DE644B;
        font-size: 12px;
        &.active {
          color: #fff;
          background: #DE644B;
        }
      }
    }
    .body {
      padding: 0 6px 0 16px;
      a {
        display: inline-block;
        padding: 0 8px;
        font-size:14px;
        color: #3A3948;
        background: #F7F8FA;
        height: 36px;
        line-height: 36px;
        min-width: 78px;
        margin-right: 10px;
        margin-bottom: 12px;
        border-radius: 18px;
        text-align: center;
        &.active {
          color: #fff;
          background: #DE644B;
        }

      }
    }
  }
}
</style>
